<link href="<?php echo base_url(); ?>public/admin/css/user.css" rel="stylesheet" type="text/css">
<script src="<?php echo base_url(); ?>/public/admin/assets/js/jquery-2.0.3.min.js"></script>
<div class="page-content">
<div class="page-header position-relative">
    <h1>
        Tạo thành viên mới !
        <small>
            <i class="icon-double-angle-right"></i>
            Thông tin có dấu <span class="red-text"">*</span> không được để trống.
        </small>
    </h1>

</div>
<div class="main-div">
    <form method="post">
        <div class="group_info">
            <h3>Thông tin nhóm</h3>
            <hr>
            <div class="account-info-content-field">
                <label for="user_group" class="lb_field">Nhóm:</label>
                <div class="input-field">
                    <select name="user_group">
                        <?php
                            foreach($group as $value){
                                echo '<option value="'.$value['GroupId'].'" >'.$value['GroupName'].'</option>';
                            }
                        ?>
                        <option value="">Adminstrator</option>
                        <option>Member</option>
                    </select>
                </div>
            </div>
        </div>
        <div class="account-info">
            <h3>Thông tin tài khoản</h3>
            <hr>
            <div class="account-info-content">
                <div class="account-info-content-field">
                    <label for="email" class="lb_field">Tài khoản:<span class="red-text"">*</span></label>
                    <div class="input-field">
                        <input type="text" id="username" name="username"  value=""/>
                        <span id="note_username_ok" class="input-field-note note_ok" hidden="hidden"></span>
                        <span id="note_username_error" class="input-field-note note_error" hidden="hidden"></span>
                    </div>
                </div>
                <div class="account-info-content-field">
                    <label for="email" class="lb_field">Email:<span class="red-text"">*</span></label>
                    <div class="input-field">
                        <input type="text" id="email" name="email"  value=""/>
                        <span id="note_email_ok" class="input-field-note note_ok" hidden="hidden">Có thể sử dụng email này !</span>
                        <span id="note_email_error" class="input-field-note note_error" hidden="hidden">Địa chỉ email không hợp lệ !</span>
                    </div>
                </div>
                <div class="account-info-content-field">
                    <label for="password" class="lb_field">Mật khẩu:  <span class="red-text"">*</span></label>
                    <div class="input-field">
                        <input type="password" id="password" name="password"  value=""/>
                        <span id="note_password_ok" class="input-field-note note_ok" hidden="hidden"></span>
                        <span id="note_password_error" class="input-field-note note_error" hidden="hidden"></span>
                    </div>
                </div>
                <div class="account-info-content-field">
                    <label for="rePassword" class="lb_field">Nhập lại mật khẩu:  <span class="red-text"">*</span></label>
                    <div class="input-field">
                        <input type="password" id="rePassword" name="rePassword" value=""/>
                        <span id="note_repassword_ok" class="input-field-note note_ok" hidden="hidden"></span>
                        <span id="note_repassword_error" class="input-field-note note_error" hidden="hidden"></span>
                    </div>
                </div>
            </div>
        </div>

        <div class="delivery-info">
            <h3>Thông tin khác</h3>
            <hr>
            <div class="delivery-info-content">
                <div class="account-info-content-field">
                    <label for="name" class="lb_field">Họ tên:</label>
                    <div class="input-field">
                        <input type="text" id="name" name="name"  value="Họ tên" disabled="disabled"/>
                    </div>
                </div>
                <div class="account-info-content-field">
                    <label for="phone" class="lb_field">Điện thoại:</label>
                    <div class="input-field">
                        <input type="text" id="phone" name="phone"  value=""/>
                    </div>
                </div>
                <div class="account-info-content-field">
                    <input type="submit" name="register_submit" class="btn-register-user-info" value="Đăng ký">
                </div>
            </div>
        </div>
    </form>
</div>
</div>
<script>
    //function check email validate
    function validateEmail(email) {
        var re = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
        return re.test(email);
    }
    $(function(){
        var isUsername = false;
        var isEmail = false;
        var isPassword = false;
        var isRePassword = false;
        ok = $('#note_username_ok');
        error = $('#note_username_error');
        $('input[name=username]').focusout(function(){
            var username = document.getElementById('username').value;
            ok.hide();
            error.hide();
            isUsername = false;
            if(username == ""){
                error.text("Chưa nhập tài khoản");
                error.show();
            }else if(username.length < 6){
                error.text("Tài khoản phải lớn hơn 6 ký tự");
                error.show();
            }
            else{
                $.ajax({
                    type:"POST",
                    url:"<?php echo base_url(); ?>admin/checkUsername",
                    dataType:"json",
                    data:{'username': username},
                    success:(function(data){
                        if(data.status == "ok"){
                            ok.show();
                            ok.text("Có thể sử dụng tài khoản này.");
                            isUsername = true;
                        }else{
                            error.text("Tài khoản đã tồn tại");
                            error.show();
                        }
                    }),
                   error:(function(){
                       error.text("Vui lòng kiểm tra kết nối Internet");
                       error.show();
                   })
                });
            }

        });
        ok_email = $('#note_email_ok');
        error_email = $('#note_email_error');
        $('input[name=email]').focusout(function(){
            ok_email.hide();
            error_email.hide();
            var email = document.getElementById('email').value;
            if(email == ""){
                error_email.text("Chưa nhập địa chỉ Email");
                error_email.show();
                isEmail = false;
            }else{
               if(!validateEmail(email)){
                   error_email.text("Địa chỉ Email không hợp lệ");
                   error_email.show();
                   isEmail = false;
               }else{
                   error_email.hide();
                   ok_email.show();
                   isEmail = true;
               }
            }
        });
        note_password_ok = $('#note_password_ok');
        note_password_error = $('#note_password_error');
        $('input[name=password]').focusout(function(){
            if(isUsername == true && isEmail == true){
                var password = document.getElementById('password').value;
                note_password_ok.hide();
                note_password_error.hide();
                isPassword = false;
                if(password.length >= 6){
                    note_password_ok.show();
                    isPassword = true;
                }else{
                    note_password_error.text("Mật khẩu phải có ít nhất 6 ký tự");
                    note_password_error.show();
                }
            }
        });
        note_repassword_ok = $('#note_repassword_ok');
        note_repassword_error = $('#note_repassword_error');
        $('input[name=rePassword]').focusout(function(){
            if(isPassword == true){
                var password = document.getElementById('password').value;
                var rePassword = document.getElementById('rePassword').value;
                note_repassword_ok.hide();
                note_repassword_error.hide();
                isRePassword = false;
                if(password != rePassword){
                    note_repassword_error.text('Mật khẩu không khớp');
                    note_repassword_error.show();
                }else{
                    note_repassword_ok.show();
                    isRePassword = true;
                }
            }
        });

        $('.btn-register-user-info').click(function(e){

            if(isUsername == true && isEmail == true && isPassword == true && isRePassword == true){
                $('register_submit').submit();
            }else{
                e.preventDefault();
            }

        });
    });

</script>